import {View, Button, Text, Image} from '@tarojs/components';
import Taro from '@tarojs/taro';
import React from 'react';
import {connect} from 'react-redux';
import * as T from '../../types';
import './index.less';
import actions from '../../actions';
import {store2Props} from '../../selectors';
import testImg from '@/assets/image/ipland/test1.png';
import {IMAGE_EMPTY, NO_DATASOURCE} from '../../constant';

//@ts-ignore
actions().actions.loadReducer();
//@ts-ignore
@connect<Partial<T.IProps>, any>(store2Props, actions)
export default class personalCenterCenter extends React.Component<Partial<T.IProps>, any> {
  constructor(props) {
    super(props);
    this.state = {
      imageError: {},
    };
  }

  componentDidMount() {}

  componentWillUnmount() {
    this.props.actions.clean();
  }

  componentWillMount(): void {
    this.props.actions.init();
  }

  componentDidShow() {}

  render() {
    const {collectionList, myWishItems} = this.props.main;

    let result = myWishItems.filter((i, index) => index < 2);
    console.log('index.tsx render result', result);

    return (
      <View className="packageIPersonalCenter-Center">
        <View className="topFirst">
          <View
            className="box"
            onClick={() => {
              Taro.navigateTo({
                url: '/pages/package-I/wishingPool/index',
              });
            }}
          >
            <Text className="text">我的许愿 ({myWishItems.length})</Text>
            <View className="box-con">
              {result.length > 0 ? (
                result.map((i, index) => (
                  <View key={'wish' + index}>
                    <Image
                      className="wishImage"
                      src={i.goodsInfoImg || IMAGE_EMPTY}
                      mode="widthFix"
                      onError={(e) =>
                        this.handleImageError(e, index, {
                          propName: 'myWishItems',
                          imageState: 'goodsInfoImg',
                        })
                      }
                    />
                    <Text className="wishGoodsName">{i.goodsInfoName}</Text>
                  </View>
                ))
              ) : (
                <View className="emptyText">进入游戏进行“许愿”就有可能获得商品</View>
              )}
            </View>
          </View>
          {/* <View style={{width: '24rpx', height: '100%'}}></View>
          <View
            className="box"
            onClick={() => {
              Taro.navigateTo({
                url: '/pages/package-I/history/index',
              });
            }}
          >
            <Text className="text">浏览记录</Text>
            <View className="box-con">
              <View>
                <Image className="goodsImg" src={testImg} mode="widthFix" />
                <Text className="goodsName">玉桂狗</Text>
              </View>
              <View>
                <Image className="goodsImg" src={testImg} mode="widthFix" />
                <Text className="goodsName">玉桂狗</Text>
              </View>
            </View>
          </View> */}
        </View>
        {/* 我的收藏柜 */}
        <View className="bottom">
          <View
            className="box"
            onClick={() => {
              Taro.navigateTo({
                url: '/pages/package-I/collectionCabinet/index',
              });
            }}
          >
            <Text className="text">我的收藏柜</Text>
            <View className="box-con">
              {collectionList.map((e) => (
                <View key={e.id}>
                  <Image className="goodsImg2" src={e.goodsInfoImg || IMAGE_EMPTY} mode="widthFix" />
                  <Text className="goodsName2">
                    {e.goodsInfoName.length > 4 ? `${e.goodsInfoName.substring(0, 4)}...` : e.goodsInfoName.length}
                  </Text>
                </View>
              ))}
              {collectionList.length <= 0 && (
                <View className="collectionEmptyText"> 收藏柜空空如也，快去乐园寻找心爱之物吧!</View>
              )}
            </View>
          </View>
        </View>
      </View>
    );
  }

  /**
   * 图片加载错误  通用
   * @param e
   * @param index
   */
  handleImageError = (e, index, item) => {
    console.log('personCenter handleImageError handleImageError index', index, 'item', item);
    const {main} = this.props;
    const {propName, imageState} = item;

    let {imageError} = this.state;

    if (imageError[propName]) {
      imageError[propName] = imageError[propName].concat([index]);
    } else {
      imageError[propName] = [index];
    }

    console.log('index.tsx center imageError', imageError);

    let result = JSON.parse(JSON.stringify(main[propName]));
    let currentImage = imageError[propName];
    let ids = currentImage;
    ids.map((i) => {
      result[i] = {
        ...result[i],
        [imageState]: NO_DATASOURCE,
      };
    });

    console.log('personCenter result', result);
    this.props.actions.action.commonChange('main.' + propName, result);
  };
}

//create by moon https://github.com/creasy2010/moon
